<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tree</title>

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../css/zTreeStyle/zTreeOutloog.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
    <script type="text/javascript" src="../../js/ztree/jquery.ztree.all.min.js"></script>
</head>
<body>
    
</body>
<script>
    $(document).ready(function () {
        var zNodes = [
            { id: 1, pId: 0, name: "文件夹", open: true },
            { id: 11, pId: 1, name: "收件箱" },
            { id: 111, pId: 11, name: "收件箱1" },
            { id: 112, pId: 111, name: "收件箱2" },
            { id: 113, pId: 112, name: "收件箱3" },
            { id: 114, pId: 113, name: "收件箱4" },
            { id: 12, pId: 1, name: "垃圾邮件" },
            { id: 13, pId: 1, name: "草稿" },
            { id: 14, pId: 1, name: "已发送邮件" },
            { id: 15, pId: 1, name: "已删除邮件" },
            { id: 3, pId: 0, name: "快速视图" },
            { id: 31, pId: 3, name: "文档" },
            { id: 32, pId: 3, name: "照片" }
        ];

        var tree1 = new bsEx.Tree({
            title:"树",
            showfooter:false,
            data:zNodes,
            width:'400px',
            height:'500px',
            zTree:{
                view:{showTitle:false}
            }
        });
        tree1.on('beforeClick',function(){
            bsEx.Alert("提示","单击事件",1);
        })
        tree1.on('onClick',function(){
            console.log('Click');
        })
    });
</script>
</html>